<template>
	<view class="app-pages">
		<!-- 新增 -->
		<view class="invoice-submit">
			<view class="submit1" @click="open">
				<u-icon name="plus-circle" size="30rpx" color="#f74062"></u-icon>
				<text style="margin-left: 10rpx;">新增旅客</text>
			</view>
		</view>

		<u-radio-group v-model="value">

			<view class="cell">
				<view class="cell-left">
					<u-icon name="edit-pen" size="40rpx" color="rgb(144, 147, 153)"></u-icon>
					<view class="" style="margin-left: 20rpx;">
						<view class="user-name">张三</view>
						<view class="user-numb">130627199405103837</view>
					</view>
				</view>
				<view class="cell-right">
					<u-radio activeColor="#f74062" label="内容"></u-radio>
				</view>
			</view>

		</u-radio-group>

		<!-- 按钮 -->
		<view class="invoice-submit">
			<view class="submit2">完成</view>
		</view>

		<!-- 表单 -->
		<u-popup :show="show" mode="center">
			<view class="popup">
				<u-cell :border="true">
					<view class="" slot="title">新增旅客</view>
					<view class="" slot="value">
						<u-icon @click="cancel" name="close-circle" size="30rpx"
							color="rgb(144, 147, 153)"></u-icon>
					</view>
				</u-cell>
				<view class="popup-form">
					<u--form :model="form" :rules="formRules" ref="uForm" labelWidth="200rpx" labelAlign="right">
						<u-form-item label="姓名:" prop="userName">
							<u-input v-model="form.userName" :customStyle="{width:'400rpx'}" />
						</u-form-item>
						
						<u-form-item label="身份证号码:" prop="infoNumb">
							<u-input v-model.number="form.infoNumb" :customStyle="{width:'400rpx'}" />
						</u-form-item>
						
						<u-form-item label="手机号码:" prop="phone">
							<u-input v-model.number="form.phone" :customStyle="{width:'400rpx'}" />
						</u-form-item>
					</u--form>
				</view>
				<view class="popup-btn">
					<view class="cancel" @click="cancel">取消</view>
					<view class="submit" @click="submit">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				show: false,
				form: {
					userName: '',
					infoNumb: '',
					phone: ''
				},
				formRules: {
					userName: {
						required: true,
						message: '请输入用户姓名',
						trigger: 'blur'
					},
					infoNumb: {
						required: true,
						message: '请输入身份证号码',
						trigger: 'blur'
					},
					phone: {
						required: true,
						message: '请输入手机号码',
						trigger: 'blur'
					}
				}
			}
		},
		methods:{
			open(){
				this.form = {
					userName: '',
					infoNumb: '',
					phone: ''
				}
				this.$refs['uForm'].clearValidate()
				this.show = true
			},
			cancel(){
				this.show = false
			},
			submit(){
				this.$refs['uForm'].validate().then(res=>{
					this.show = false
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	::v-deep .u-radio__text {
		display: none !important;
	}
	::v-deep .u-safe-bottom{
		display: none !important;
	}
	::v-deep .u-radio__icon-wrap {
		margin-right: 0 !important;
	}

	.popup {
		width: 700rpx;
		.popup-form{
			padding: 40rpx 0;
		}
		.popup-btn{
			display: flex;
			border-top: 2rpx solid #F2F2F2;
			.cancel,.submit{
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
			}
			.submit{
				color: #f74062;
				border-left: 2rpx solid #F2F2F2;
			}
		}
	}

	.invoice-submit {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		margin-top: 50rpx;

		.submit1 {
			background-color: #ffffff;
			border-radius: 20rpx;
			width: 500rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			color: #f74062;
			border: 2rpx solid #f74062;
		}

		.submit2 {
			border-radius: 20rpx;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #FFFFFF;
			background-color: #f74062;
		}
	}


	.cell {
		margin-top: 30rpx;
		box-shadow: 0 0 4rpx #ccc;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;

		.cell-left {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-right: 30rpx;

			.user-numb {
				margin-top: 15rpx;
			}
		}

	}
</style>
